// 图标数据配置
var dom1 = document.getElementById("cdemo01");
var dom2 = document.getElementById("cdemo02");
var dom3 = document.getElementById("cdemo03");
var dom4 = document.getElementById("cdemo04");
var demoChart1 = echarts.init(dom1);
var demoChart2 = echarts.init(dom2);
var demoChart3 = echarts.init(dom3);
var demoChart4 = echarts.init(dom4);


var app = {};

//图标1参数
option1 = null;
option1 = {
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top:'5%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: false, readOnly: false},
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['12/1', '12/1', '12/1', '12/1', '12/1', '12/1', '12/6'],
        axisLabel: {
            show: true,
            textStyle: {
              color: '#18cdf2'   //这里用参数代替了
            }
        },
        axisLine:{
            lineStyle:{
                color:'#011011',
                width:1,//这里是为了突出显示加上的
            }
        }

    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            textStyle: {
              color: '#18cdf2'   //这里用参数代替了
            }
        },
        splitLine:{show: false},
        axisLine:{
            lineStyle:{
                color:'#011011',
                width:1,//这里是为了突出显示加上的
            }
        }
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        smooth: true,
        tooltip: {
            show: false,
        },
        label: {
              normal: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
              }
         },
        type: 'line',
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                        {offset: 1, color: '#18cdf2'},
                        {offset: 0.2, color: '#01232e'},
                        {offset: 0, color: '#030e14'}
                    ]
                )
            }
        },
        lineStyle:{
            normal:{
                color: "#19ccf2",
                width:2,
                lineStyle: {
                    color: "#2ec7c9"
                }
            }
        },
        //隐藏圆点
        symbol: "none",
        itemStyle: {
            normal: {
                show:false,
                color: "#2ec7c9",
                lineStyle: {
                    color: "#FFFFFF"
                }
            }
        }
    }]
};
;

if (option1 && typeof option1 === "object") {
    demoChart1.setOption(option1, true);
}


//图标2参数
option2 = null;
option2 = {
    grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        top:'1%',
        containLabel: true
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: false},
            dataView : {show: false, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'center',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
        
    },
    calculable : true,
    series : [
        {
            name:'本地和外地',
            type:'pie',
            radius : ['50%', '75%'],
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    },
                    color:function(params) {
                    //自定义颜色
                    var colorList = [           
                        '#fdba86','#56c9e8'
                    ];
                    return colorList[params.dataIndex]
                    }
                },
                emphasis : {
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '20'
                        }
                    }
                }
            },
            data:[
                {value:135, name:'本地'},
                {value:310, name:'外地'},
            ]
        }
    ]
};
if (option2 && typeof option2 === "object") {
    demoChart2.setOption(option2, true);
}
                  
//图标三 statrt


//初始化数据
var category = ['1', '2', '3', '4', '5', '6', '7'];
var barData = [3100, 2142, 1218, 581, 431, 383, 163];
option3 = null;
var option3 = {
    title:{
        show:false
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top:'5%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {show: false},
        axisLabel: {
            show: true,
            textStyle: {
              color: '#18cdf2'   //这里用参数代替了
            },
            fontSize:10
        }
    },
    yAxis: {
        type: 'category',
        data: category,
        splitLine: {show: false},
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        offset: 10,
        nameTextStyle: {
            fontSize: 15
        },
        axisLabel: {
            show: true,
            textStyle: {
              color: '#18cdf2'   //这里用参数代替了
            }
        }
    },
    series: [
        {
            name: '数量',
            type: 'bar',
            data: barData,
            barWidth: 14,
            barGap: 10,
            smooth: true,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset: [5, -2],
                    textStyle: {
                        color: '#56c9e8',
                        fontSize: 13
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    barBorderRadius: 7
                },
                normal: {
                    barBorderRadius: 7,
                    color: "#56c9e8"
                }
            }
        }
    ]
};



// demoChart3.setOption(option3);
if (option3 && typeof option3 === "object") {
    demoChart3.setOption(option3, true);
}


//初始化数据
var category = ['1', '2', '3', '4', '5', '6', '7'];
var barData = [3100, 2142, 1218, 581, 431, 383, 163];
option4 = null;
var option4 = {
    title:{
        show:false
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top:'5%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {show: false},
        axisLabel: {
            show: true,
            textStyle: {
              color: '#18cdf2'   //这里用参数代替了
            },
            fontSize:10
        }
    },
    yAxis: {
        type: 'category',
        data: category,
        splitLine: {show: false},
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        offset: 10,
        nameTextStyle: {
            fontSize: 15
        },
        axisLabel: {
            show: true,
            textStyle: {
              color: '#18cdf2'   //这里用参数代替了
            }
        }
    },
    series: [
        {
            name: '数量',
            type: 'bar',
            data: barData,
            barWidth: 14,
            barGap: 10,
            smooth: true,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset: [5, -2],
                    textStyle: {
                        color: '#56c9e8',
                        fontSize: 13
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    barBorderRadius: 7
                },
                normal: {
                    barBorderRadius: 7,
                    color: "#56c9e8"
                }
            }
        }
    ]
};

demoChart4.setOption(option4);
if (option4 && typeof option4 === "object") {
    demoChart4.setOption(option4, true);
}



